/*
 * @Author: mayijun
 * @Date: 2022-05-13 10:21:47
 * @LastEditors: Zhang Kai
 * @LastEditTime: 2022-06-21 18:22:54
 */
//筛选条件页签
import { defineComponent, reactive, onMounted, ref, computed } from 'vue';
import './index.scss';
import API from '@/services';
import Table from '@/components/Table';
import ConditionDrawer from './conditionDrawer';

const ConditionSettings = defineComponent({
  name: 'ConditionSettings',
  setup: (props, { slots, attrs, emit }) => {

    const state = reactive({
      conditionList: [] as any[],
      drawerVisible: false,
      drawerType: "1",
      settings: {},
    });

    const tableColumn = reactive([
      {
        label: '功能名称',
        prop: 'pageName',
        default: ({ row }: any) => {
          return (<span>{getCnName(row.pageCode)}</span>)
        }
      },
      {
        label: '当前筛选条件数',
        prop: 'count',
      },
      {
        label: '操作',
        width:'120',
        default: ({ row }: any) => {
          return (
            <>
              <el-button type="text" onClick={() => toInfo(row)}>查看</el-button>
              <el-button type="text" onClick={() => toEdit(row)}>编辑</el-button>
            </>
          );
        }
      }
    ]);

    //转换中文名称
    const getCnName = (code: any) => {
      switch (code) {
        case 'MODIFIER':
          return '修饰词管理';
        case 'TIMEPERIOD':
          return '统计粒度管理';
        case 'INDEXMANAGE':
          return '指标元信息管理';
        case 'DIMENSIONMGMT':
          return '维度管理';
        default:
          return '';
      }
    }

    //查看
    const toInfo = (row: any) => {
      state.settings = row;
      state.drawerVisible = true;
      state.drawerType = "2";
    }

    //编辑
    const toEdit = (row: any) => {
      state.settings = row;
      state.drawerVisible = true;
      state.drawerType = "1";
    }

    //查询条件列表
    const getConditionList = async () => {
      try {
        const { code, data }: any = await API.userPageFilterSetting.getList();
        if (code === 200 && Array.isArray(data)) {
          state.conditionList = data;
        }
      } catch (error) {
        console.log(error);
      }
    };

    //关闭抽屉
    const closeDrawer = () => {
      state.drawerVisible = false;
      getConditionList();
    }

    onMounted(() => {
      getConditionList();
    });
    return () => {
      return (
        <div class="condition-settings">
          <Table
            data={state.conditionList}
            column={tableColumn}
          />
          <ConditionDrawer
            drawerVisible={state.drawerVisible}
            drawerType={state.drawerType}
            condition={state.settings}
            onClose={closeDrawer}
          ></ConditionDrawer>
        </div>
      );
    };
  }
});

export default ConditionSettings;
